<template>
	<view class="page login bgff px34">
		<view class="aliC py36">
			<image class="w119 r6" src="/static//logo.jpeg" mode="aspectFill"></image>
		</view>
		<view class="fs22 bold6">设置支付密码</view>
		<view class="flex flexC bor r3 p6 mt20">
			<image class="w32 mr6" src="/static/img/icon/phone.png" mode="widthFix"></image>
			<input type="tel" disabled="disable" v-model="mobile" value="" class="flex1" placeholder="请输入您的手机号"/>
		</view>
		<view  class="flex flexC bor r3 p6 mt20">
			<image class="w32 mr6" src="/static/img/icon/email.png" mode="widthFix"></image>
			<input  type="number" v-model="code" class="flex1" placeholder="请输入4位数的验证码"/>
			<text v-if="times == 60" class="cff0 px6 py6" @click="getCode">发送验证码</text>
			<text v-else class="c99 pr6 py6">{{times}}s后发送</text>
		</view>
	
		<button class="bg57  mt24 fs16" @click="set">确定</button>
		
		<uni-popup type="bottom" ref="passwordPopup" class="pwdPopup">
			<view class="bgff r10 inpbox aliC px20 py30 mx40">
				<text @click="closePopup" class="fs24 c99 px12 py6 colse">×</text>
				<view class="fs18 mb12">请输入支付密码</view>
				<view class="mb20"></view>
				<password-input :numLng='password'></password-input>
			</view>
			<number-keyboard tabBar ref='KeyboarHid' @input='onInput' psdLength='6'></number-keyboard>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCode: false,
				mobile:"",
				code:"",
				times: 60,
				password:''
			};
		},
		onLoad() {
			this.mobile = uni.getStorageSync("mobile");
		},
		onShow() {
			
		},
		methods:{
			
		
			onInput(val) {
				this.password = val;
				console.log(this.password)
				if(this.password.length == 6) {
					this.setPayPassword();
				}
			},
			
			closePopup() {
				this.$refs.passwordPopup.close()
				this.$refs.KeyboarHid.close()
			},
			
			set(){
				
				if(this.code == ''){
					uni.showToast({
						title: "验证码不能为空",
						icon: 'none'
					});
					return;
				}
				this.$refs.passwordPopup.open()
				this.$refs.KeyboarHid.open()
			},
			setPayPassword(){
				
				let param = {
					code:this.code,
					password: this.password,
					mobile:this.mobile
				}
				let that = this;
				this.$api.setPayPassword(param).then(res => {
				
					that.closePopup();
					if (res.code == 1) {
						uni.showToast({
							title: "设置成功",
							icon: 'none'
						});
						uni.navigateBack({
							delta:1
						})
						console.info(res);
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			
			
			getCode(){
				if(this.mobile == ""){
					uni.showToast({title:"手机不能为空",icon:'none'});
					return;
				}
				let param = {
					mobile:this.mobile
				}
				let that = this;
				this.$api.userGetCode(param).then(res => {
				
					if (res.code == 1) {
						this.countDown()
						
					}
				})
			},
			countDown() {
				let timer = null;
				timer = setInterval(() => {
					if(this.times <= 0) {
						this.times = 60;
						clearInterval(timer)
					}else {
						this.times -= 1
					}
				},1000)
			}
				
		}
		
	}
</script>

<style lang="scss" scoped>
.login {
	.w119 {width: 238upx;height: 238upx;}
	.w32 {width: 64upx;height: 64upx;}
	.pwdPopup {
		/deep/.uni-popup__wrapper {height: 80vh;}
		.inpbox {
			position: relative;
			margin-bottom: 55%;
			.colse {position: absolute;top: 0;right: 0;}
		}
	}
}
</style>
